<template>
  <div class="hello">

      <h1> 当前求和为：{{sum}}</h1>
      <h1> 当前求和得10倍为：{{nBeiNum}}</h1>

    <select v-model.number="n" style="width: 100px">
      <option :value="i" v-for="i in 3 " :key="i">{{i}}</option>
    </select>

    <button @click="jia">+</button>
    <button @click="jian">-</button>
    <button @click="_jia">当和为奇数时+</button>
    <button @click="timeJia">过0.5秒+</button>

      <div>下面列表字段个数为{{len}}</div>

  </div>
</template>

<script>
    import { mapState,mapGetters,mapActions,mapMutations } from 'vuex'

export default {
  name: 'countUse',
  data(){
    return {
      // sum:0,
        n:1,
        beishu:0,
    }
  },
    computed:{
        // ...mapState(['sum','list']),

        ...mapState('count', ['sum']),

        ...mapState('formUse',{
            'len':function (state) {
                return state.list.length
            }
        }),
        ...mapGetters('count',['nBeiNum']),


        /*nBeiNum(){
            return this.$store.getters.nBeiNum
        },*/

        /*mapState({
                     // 箭头函数可使代码更简练
                     count: state => state.count,

        // 传字符串参数 'count' 等同于 `state => state.count`
                    countAlias: 'count',

        // 为了能够使用 `this` 获取局部状态，必须使用常规函数
        // countPlusLocalState (state) {
        //     return state.count + this.localCount
        // }
        }),*/
        // sum(){
        //     console.log('mapState',mapState())
        //     return this.$store.state.sum
        // },
        /*len(){
            return this.$store.state.list.length
        }*/

    },
  methods:{
      // ...mapMutations(['JIA','JIAN']),
      ...mapActions('count',['_increment','_timeJia']),
      ...mapMutations('count',{
          'increment':'JIA',
          'JIAN':'JIAN'
      }),

    jia() {
      // this.sum += this.n
      //   this.$store.commit('JIA',this.n)
        this.increment(this.n)
      // console.log('store',this.$store)
      //this.sum = this.sum + this.n
    },
    jian(){
        // this.$store.commit('JIAN',this.n)
        this.JIAN(this.n)
    },
    _jia(){
      // 0 == true; 0 == false
      //   this.$store.dispatch('_jia',this.n)
        this._increment(this.n)
    },
    timeJia(){
        // this.$store.dispatch('timeJia',this.n)
        this._timeJia(this.n)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
  button{
    margin: 0 5px   ;
  }
</style>
